<template>
  <el-menu
    class="el-menu"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
    background-color="#72dfd0"
  >
    <el-menu-item index="0">
      <img id="logo" src="/public/aurora-logo.png" alt="Aurora logo" />
      <Strong class="logo">Aurora</Strong>
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item class="navText" index="1">音乐馆</el-menu-item>
    <el-menu-item class="navText" index="2">我的音乐</el-menu-item>
    <el-menu-item class="navText" index="3">客户端</el-menu-item>
    <el-menu-item class="navText" index="4">开源代码</el-menu-item>
    <el-menu-item class="navText" index="5">
      <el-input v-model="search" size="small" :prefix-icon="Search" />
    </el-menu-item>
    <el-menu-item class="navText" index="6">登录注册</el-menu-item>
    <LoginModel></LoginModel>
  </el-menu>
</template>

<script lang="js" setup>
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import LoginModel from '../login_model/LoginModel.vue'
import { loginModelStore } from '@/stores/loginModel'
import { storeToRefs } from 'pinia'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const store = loginModelStore()
const { centerDialogVisible } = storeToRefs(store)
const search = ref('')

const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  if (key == 1) {
    router.push({ path: '/music-box' })
  }
  if (key == 2) {
    router.push({ path: '/my-music' })
  }
  if (key == 3) {
    ElMessage.warning('尚未开发')
  }
  if (key == 4) {
    ElMessage.warning('暂未公开')
  }
  if (key == 6) {
    centerDialogVisible.value = true
  }
}
</script>

<style scoped>
.navText {
  color: white;
}
.el-menu-item {
  --el-menu-hover-bg-color: none;
  --el-menu-hover-text-color: #3498db;
  --el-menu-active-color: #2980b9;
}
.el-menu {
  padding: 0 5% 0 5%;
}
.logo {
  font-size: 22px;
  color: white;
  margin-left: 5px;
}
#logo {
  width: 36px;
}
.flex-grow {
  flex-grow: 1;
}
</style>
